<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./css/loading.css">
    <link rel="stylesheet" href="./css/aboutme.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/Swiper/5.4.5/js/swiper.min.js"> </script>
    <script src="https://at.alicdn.com/t/font_1461955_cfps8u9h8w7.js"></script>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/Swiper/5.4.5/css/swiper.min.css">
    <title>个人简历</title>

</head>

<body>
    <div id="siteWelcome" class="site-welcome active">
        <div class="loading"></div>
    </div>

    <div id="topNavBar" class="topNavBar">
        <div class="topNavBar-inner clearfix">
            <a class="logo" href="#" alt="logo" style="float:left;">
                <span class="rs">RS</span>
                <span class="card">card</span>
            </a>
            <nav class="menu" style="float:right">
                <ul class="clearfix">
                    <li>
                        <a href="#siteAbout">关于</a>
                    </li>
                    <li>
                        <a href="#siteSkills">技能</a>
                    </li>
                    <li>
                        <a href="#siteWorks">作品</a>
                        <!-- <ul class="submenu">
                            <li>作品1</li>
                            <li>作品2</li>
                            <li>作品3</li>
                        </ul> -->
                    </li>
                    <li>
                        <a href="#">博客</a>
                        <ul class="submenu">
                            <li><a href="https://juejin.im/user/2946346893973390/posts">掘金</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">日历</a>
                    </li>
                    <li>
                        <a href="#">联系方式</a>
                    </li>
                    <li>
                        <a href="#">其他</a>
                    </li>
                </ul>
            </nav>
        </div>
    </div>
    <div class="banner">
        <div class="mask"></div>
    </div>
    <main style="margin-top: -340px;">


        <div id="siteAbout" class="usercard" data-x>
            <div class="pictureAndText clearfix">
                <div class="picture"><img src="./img/1571214720(1).jpg" alt="头像" width="300" height="350">
                </div>
                <div class="text">
                    <div class="profile">
                        <span class="welcome">Hello
                            <span class="triangle"></span>
                        </span>
                        <h1>杨宝芝</h1>
                        <p>前端开发工程师</p>
                        <hr>
                        <dl>
                            <dt>年龄</dt>
                            <dd>27</dd>
                            <dt>所在城市</dt>
                            <dd>广东东莞</dd>
                            <dt>邮箱</dt>
                            <dd>651033755@qq.com</dd>
                            <dt>手机</dt>
                            <dd>13148912152</dd>
                            <dt>教育背景</dt>
                            <dd>广东外语外贸大学 本科</dd>
                        </dl>
                    </div>
                </div>
            </div>
            <footer class="media">

                <a href="#">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-qq"></use>
                    </svg></a>
                <a href="#">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-weibo"></use>
                    </svg></a>
                <a href="#">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-github"></use>
                    </svg></a>
            </footer>
        </div>
        <a class="button" href="./img/1571214720(1).jpg" target="_blank" download>下载PDF简历</a>
        <p>bobo，资深前端工程师，资深前端讲师，现在在学习前端课程。
            <br />技能：前端开发，Rails 开发，Node.js 开发
        </p>

    </main>
    <section id="siteSkills" class="skills" data-x>
        <h2>技能</h2>
        <ol class="clearfix">
            <li>
                <h3>HTML5 & CSS3</h3>
                <div class="progressBar">
                    <div class="progress" style="width:70%"></div>
                </div>
            </li>
            <li>
                <h3>JavaScript</h3>
                <div class="progressBar">
                    <div class="progress" style="width:60%"></div>
                </div>

            </li>
            <li>
                <h3>jQuery</h3>
                <div class="progressBar">
                    <div class="progress" style="width:30%"></div>
                </div>
            </li>
            <li>
                <h3>Vue.js</h3>
                <div class="progressBar">
                    <div class="progress" style="width:40%"></div>
                </div>
            </li>
            <li>
                <h3>Mini Program</h3>
                <div class="progressBar">
                    <div class="progress" style="width:50%"></div>
                </div>
            </li>
            <li>
                <h3>HTTP</h3>
                <div class="progressBar">
                    <div class="progress" style="width:70%"></div>
                </div>
            </li>
        </ol>
    </section>
    <section id="siteWorks" class="portfolio" data-x>
        <h2>作品集</h2>
        <div id="mySlides">
            <div class="swiper-container">
                <div class="swiper-wrapper">

                    <div class="swiper-slide">
                        <a href="http://vhjfkds.gitee.io/canvas2.0/canvas.html"><img src="./img/canvas.png" class="demo"></a>
                        <div class="wrapper">
                            <h3>Diagram画板</h3>
                            <p>该项目技术使用<span>原生JS</span>，主要调用Canvas API，实现了划线、调色、橡皮擦、保存等功能，完全有我独立开发。适配移动端和PC、多线条多颜色选择，可用于绘图、笔记。</p>
                            <p class="arrow"><img src="./img/手指.svg">点击图片可预览</p>
                        </div>
                       
                    </div>
                    <div class="swiper-slide">
                        <a href="http://vhjfkds.gitee.io/accountbook-3-website"><img src="./img/accountbook.png" class="demo"></a>
                        <div class="wrapper">

                        <h3>青木记账</h3>
                        <p>一款基于<span>Vue、VueRouter</span>的移动端单页面应用。源代码几乎完全用TypeScript实现。</p>
                        <p>这是我从自己的需求出发，设计出的极简记账应用，特点是快速记账，查看收入和支出详情，还可以通过图表查看自己的消费习惯。</p>
                        <p class="arrow"><img src="./img/手指.svg">点击图片可预览</p>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <a href="https://vhjfkds.gitee.io/webpage-navigation/"><img src="./img/navbar.png" class="demo"></a>
                        <div class="wrapper">

                        <h3>极简导航</h3>
                        <p>这是我在学习JS的时候做的一个简单的导航网站。</p>
                        <p>使用技术：<span>JQuery、正则表达式、localStorage</span></p>
                        <p class="arrow"><img src="./img/手指.svg">点击图片可预览</p>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <a href="http://vhjfkds.gitee.io/css-animation-demo/"><img src="./img/blackcat.png" class="demo"></a>
                        <div class="wrapper">
                        
                        <h3>BlackCat</h3>
                        <p>这是我在学习JS的时候做的一个小动画。</p>
                        <p class="arrow"><img src="./img/手指.svg">点击图片可预览</p>
                        </div>
                    </div>
                </div>

                <!-- 导航左右按钮 -->
                <div class="swiper-button-prev hide"></div>
                <div class="swiper-button-next hide"></div>

            </div>
        </div>
        
    </section>
    <section class="message" data-x>
        <h2>留言</h2>
        <ol id="messageList">
        </ol>
        <form id="postMessage">
            <input class="name" type="text" name="name" placeholder="姓名">
            <input class="content" type="text" name="content" placeholder="内容~">
            <input class="submit" type="submit" value="留  言">
        </form>
    </section>
    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/17.1.1/Tween.min.js"></script>-->
    <script src="https://cdn.bootcdn.net/ajax/libs/tween.js/18.6.4/tween.amd.js"></script>
     <!-- <script src="https://cdn.bootcdn.net/ajax/libs/tween.js/18.6.4/tween.amd.min.js"></script> -->
     <!-- <script src="https://cdn.bootcdn.net/ajax/libs/tween.js/18.6.4/tween.cjs.min.js"></script> -->
    <script src="https://cdn.jsdelivr.net/npm/leancloud-storage@4.6.1/dist/av-min.js"></script>
    <script src="./js/Aboutme/base/view.js"></script>
    <script src="./js/Aboutme/base/Model.js"></script>
    <script src="./js/Aboutme/base/Controller.js"></script>

    <script src="./js/Aboutme/init-swiper.js"></script>
    <script src="./js/Aboutme/auto-slide-up.js"></script>
    <script src="./js/Aboutme/sticky-topbar.js"></script>
    <!-- <script src="./js/Aboutme/smoothly-navigation.js"></script> -->
    <script src="./js/Aboutme/message.js"></script>
    <script>
        //loading动画
        setTimeout(function () {
            siteWelcome.classList.remove('active')
        }, 300)




    </script>

</body>

</html>